<template>
  <div class="flex md:flex-row flex-col cursor-pointer" @click="goToDetail">
    <div class="w-[350px] h-full md:w-[593px] md:h-[240px] flex flex-col mt-[75px] md:order-2 order-2">
      <span class="text-[28px] leading-[40px] md:text-[28px]  whitespace-normal break-words md:leading-[40px]">
        {{ props.title }}
      </span>
      <div class="text-[16px] w-[350px] mt-2 md:mt-6 md:text-[18px] font-normal  md:w-[480px] text-left">
        {{ props.desc }}
      </div>
      <div class="mt-auto">
        <span v-if="props.author" class="text-[16px] font-normal text-dark">{{ props.author }}</span>
        <a-divider v-if="props.author" direction="vertical" />
        <span class="text-[16px] font-normal text-dark">{{ formatDate(props.date) }}</span>
      </div>
    </div>
    <div class="w-full flex justify-center md:mt-0 md:w-[600px] md:h-full md:order-1 order-1 md:top-0 mt-8 relative"> <!-- 修改为 w-full 和 justify-center -->
      <div class="image-container relative p-[50px]">
        <div class="square-container">
          <img src="@/assets/images/heart.png" class="heart-icon">
          <svg class="path-svg" viewBox="0 0 600 600" width="60" height="60">
            <clipPath id="left-half">
              <path d="M 0 0 L 0 600 Q 0 450 150 450 Q 450 450 450 150 Q 450 0 600 0 L 0 0 Z" />
            </clipPath>
            <rect x="0" y="0" width="600" height="600" fill="rgba(255, 255, 255, 1)" clip-path="url(#left-half)" />
            <path d="M 0 600 Q 0 450 150 450 Q 450 450 450 150 Q 450 0 600 0" fill="none" stroke="#2A3FF0" stroke-width="18" />
          </svg>
        </div>
        <img class="md:w-[450px] md:h-[300px] rounded-[50px] shadow-lg border-[3px] border-primary border-solid" fit="cover" :src="props.bgImg" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  type: {
    type: String,
    required: true,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  desc: {
    type: String,
    default: ''
  },
  bgImg: {
    type: String,
    default: ''
  },
  author: {
    type: String,
    default: ''
  },
  date: {
    type: Number,
    default: ''
  },
  cid: { // 添加id属性
    type: String,
    default: ''
  }
})

const formatDate = (date: number) => {
  const dateObj = new Date(date)
  return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`
}

// 修改跳转到详情页的方法
const goToDetail = () => {
  let path = ''
  if(props.type === 'news') {
    path = '/news/detail'
  } else if(props.type === 'eventReview') {
    path = '/events/review_detail'
  } else if(props.type === 'case') {
    path = '/cases/detail'
  }
  router.push({
    path: path,
    query: {
      cid: props.cid
    }
  })
}
</script>

<style scoped>
.heart-icon {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  z-index: 10;
}

.image-container {
  position: relative;
  width: 500px;
  height: 400px;
}

.square-container {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  z-index: 5;
  background-color: transparent;
}

.path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>